<style>
	.container {
		width: 600px;
		margin: 60px auto;
	}
	.fr {
		float: right;
	}
	.lg {
		height: 50px;
		margin-bottom: 20px;
	}
	input[type="checkbox"] {
		margin-right: 10px;
	}
	.finish {
		text-decoration: line-through;
	}
</style>

<div class="container">
	<input
		#AddTodoInput
		type="text"
		class="form-control lg"
		placeholder="请输入任务名称"
	/>
	<ul class="list-group list-group-flush">
		<li class="list-group-item" *ngFor="let todo of todos | async">
			<input
				[id]="todo.id"
				type="checkbox"
				[checked]="todo.completed"
				(click)="todoFinish(todo.id)"
			/>
			<label [for]="todo.id" [class.finish]="todo.completed">
				{{ todo.title }}
			</label>
			<button
				type="button"
				class="btn btn-danger btn-sm fr"
				(click)="deleteTodo(todo.id)"
			>
				删除
			</button>
		</li>
	</ul>
</div>
